<template>
	<view class="order">
		<u-tabs :list="menu" :current="current" :activeStyle="{color:'#f05948',fontWeight:600}" lineColor="#f05948"
			@change="tabsChange"></u-tabs>
		<swiper class="swiper" :current="swiperCurrent" @change="swiperChange">
			<swiper-item v-for="menuItem in menu" :key="menuItem.id">
				<scroll-view class="scroll-view" scroll-y @scrolltolower="getOrderList('loadmore')">
					<view class="list">
						<view class="list-item" v-for="item in list" :key="item.id">
							<view class="list-item-line1">订单号：<span style="color: #f05948;"
									@click="copy(item.sn)">{{ item.sn }}</span></view>
							<view class="list-item-line">
								<view class="item-line-once">
									<view class="title">套餐名称</view>
									<view class="value">{{ item.recharge_package_name }}</view>
								</view>
								<view class="item-line-once">
									<view class="title">金额</view>
									<view class="value">{{ item.order_amount }}</view>
								</view>
								<view class="item-line-once">
									<view class="title">状态</view>
									<view class="value">{{ item.pay_status_text }}</view>
								</view>
							</view>
							<view class="list-item-line">
								<view class="item-line-once">
									<view class="title">创建时间</view>
									<view class="value">{{ item.create_time }}</view>
								</view>
								<view class="item-line-once" v-if="item.pay_status === 1">
									<view class="title">支付时间</view>
									<view class="value">{{ item.pay_time_text }}</view>
								</view>
							</view>
							<view class="footer">
								<u-button v-if="item.pay_status == 0" :custom-style="{
									width: '160rpx',
									height: '60rpx',
									margin: '0 0 0 10rpx'
								}" size="medium" color="#f05948" text="立即支付" @click="payment(item)"></u-button>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		order_menu
	} from '../../static/utils/constants'
	import {
		get,
		post
	} from '../../static/utils/request'
	import {
		Member,
		Order
	} from '../../static/utils/service'
	import {
		Loading,
		Toast,
		UniBaseApi
	} from '../../static/utils/utils'
	export default {
		data() {
			return {
				menu: order_menu,
				list: [],
				page_no: 1,
				page_size: 10,
				current: 0,
				swiperCurrent: 0,
			}
		},
		onLoad(e) {
			this.getOrderList()
		},
		methods: {
			//获取列表数据
			async getOrderList(source) {
				if (source === 'loadmore') {
					this.page_no++
				}
				if (source === 'refresh') {
					this.page_no = 1
					this.list = []
				}
				const {
					code,
					data,
					msg
				} = await get(Order.lists, {
					pay_status: this.menu[this.current].id,
					page_no: this.page_no,
					page_size: this.page_size
				}, '加载中')
				if (code === 1) {
					this.list.push(...data.lists)
				} else Toast.error(msg)
			},
			tabsChange(e) {
				this.swiperCurrent = e.index
			},
			swiperChange(e) {
				this.current = e.detail.current
				this.getOrderList('refresh')
			},
			copy(data) {
				UniBaseApi.copy(data)
			},
			async payment(item) {
				const res = await post(Member.recharge, {
					recharge_package_id: item.recharge_package_id,
					pay_way: item.pay_way
				}, '请求中')
				if (res.code === 1) {
					const resp = await post(Member.prepay, {
						from: res.data.from,
						pay_way: item.pay_way,
						order_id: res.data.order_id
					})
					uni.requestPayment({
						...resp.data.config,
						success: res => {
							Toast.none('支付成功')
							this.getOrderList('refresh')
						},
						fail: error => Toast.none('支付已取消')
					})
				} else {
					Toast.none(res.msg)
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: #f6f6f6;
	}

	.order {
		height: 100%;
		display: flex;
		flex-direction: column;

		/deep/.u-tabs {
			background-color: #fff;
		}

		.swiper {
			flex: 1;

			.scroll-view {
				height: 100%;

				.list {
					padding-bottom: env(safe-area-inset-bottom);
				}

				.list-item {
					padding: 25rpx 30rpx;
					background-color: #fff;
					border-top: 2rpx solid #f6f6f6;

					.list-item-line {
						margin-top: 30rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.item-line-once {
							.title {
								font-size: 30rpx;
							}

							.value {
								margin-top: 20rpx;
								font-size: 26rpx;
							}
						}
					}

					.footer {
						display: flex;
						justify-content: flex-end;
					}
				}
			}
		}
	}
</style>